<template>
    <div>
        <div class="header">
            <div class="font">
                楼栋管理
            </div>
            <div class="input">
                <el-form ref="form" :model="form" label-width="20px">
                    <el-form-item>
                        <el-input style="width:200px;margin-right: 20px; " v-model="form.name" placeholder="请输入关键字进行过滤">
                        </el-input>
                        <el-button type="primary" size="small">查询</el-button>
                        <el-button type="success" size="small" @click="add">添加小区</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 表格 -->
        <div>
            <Tree :tableList="tableList" :props="defaultProps" :default-expand-all="true" node-key="id"
                :expand-on-click-node="false" @isclose="isclose">
            </Tree>
        </div>
        <!-- 添加小区 -->
        <div>
            <Add :dialogVisible="dialogVisible" @isclose="isclose" :pid="pid"></Add>
        </div>
    </div>
</template>

<script>
import { builList } from '@/api/building'
import Tree from '@/components/Tree.vue'
import Add from '@/components/add/addbuilding.vue'
export default {
    
    data() {
        return {
            dialogVisible:false,
            form: {},
            //列表
            tableList: [],
            defaultProps: {
                label: 'name',
                children: 'children'
            },
            pid:0
        }
    },
    components: {
        Tree,
        Add
    },
    created() {
        //列表
        this.GetBuillist()
    },
    methods: {
        //列表
        async GetBuillist() {
            let res = await builList()
            console.log(res);
            if (res.errCode == 10000) {
                this.tableList = res.data.list
                // 把值存入vuex一份
                // this.$store.commit('cascade/setBuilding', this.tableList)

            }
        },
        add(){
            this.dialogVisible = true
            this.pid = 0
        },  
        isclose(val, isrefresh = false, clear={}) {
            this.dialogVisible = val
            this.form = clear
            if (isrefresh) {
                this.GetBuillist()
            }
        },
    }
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    height: 70px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;

}

.font {
    color: #427ff4;
    font-size: 16px;
    margin-top: 25px;
}

.input {
    margin-top: 15px;
}
</style>